<template>
  <el-dialog title="用户注册"
             :visible.sync="visible"
             :close-on-click-modal="false">
    <el-tabs type="border-card">
      <el-tab-pane label="用户信息" name="first"></el-tab-pane>
        <el-form :model="dataForm"  :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit('dataForm')" label-width="80px">
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="dataForm.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="dataForm.password" type="password" placeholder="请输入密码"  auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="en_password">
                <el-input v-model="dataForm.en_password" type="password" placeholder="请输入密码"  auto-complete="off"></el-input>
            </el-form-item>
            <el-row type="flex" class="row-bg">
                <el-col :span="100">
                    <el-form-item label="验证码" prop="captcha">
                        <el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="100">
                    <el-form-item>
                        <el-button @click.native="getCaptcha" type="primary" class="code-btn">
                            <span v-show="show"  >获取验证码</span>
                            <span v-show="!show" class="count">{{count}} s</span>
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit('dataForm')">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import API from '@/api'
import { isPassword } from '@/utils/validate'
import { isMobile } from '@/utils/validate'
import { isCaptcha } from '@/utils/validate'

export default {
  data () {
    // 校验确认密码
    var validateComfirmPassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('6-12位的字母、数字'))
      } else if (this.dataForm.password !== value) {
        callback(new Error('确认密码与密码输入不一致'))
      } else {
        callback()
      }
    }
    var validateNewPassword = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('6-12位的字母、数字'))
      } else {
        callback()
      }
    }
    var validateMobile = (rule, value, callback) => {
      if (!isMobile(value)) {
        this.mobileVallidate = false
        callback(new Error('手机号格式不对'))
      } else {
        this.mobileVallidate = true
        callback()
      }
    }
    var validateCaptcha = (rule, value, callback) => {
      if (!isCaptcha(value)) {
        this.captchaVallidate = false
        callback(new Error('验证码格式不对'))
      } else {
        this.captchaVallidate = true
        callback()
      }
    }
    return {
      visible: false,
      captchaVallidate: false,
      // 倒计时
      count: '',
      timer: null,
      show: true,
      // 手机号校验结果
      mobileVallidate: false,
      dataForm: {
        mobile: '',
        password: '',
        en_password: '',
        captcha: '',
        host: window.location.host
      },
      dataRule: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validateMobile, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validateNewPassword, trigger: 'blur' }
        ],
        en_password: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' },
          { validator: validateComfirmPassword, trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { validator: validateCaptcha, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
    },
    // 表单提交
    dataFormSubmit (formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].validate(valid => {
        if (valid) {
          var params = {
            name: this.dataForm.mobile,
            password: this.dataForm.password,
            mobile: this.dataForm.mobile,
            captcha: this.dataForm.captcha,
            host: this.dataForm.host
          }
          API.common.register(params).then(({data}) => {
            console.log(data)
            if (data && data.code === 0) {
              this.$message({
                message: '用户注册成功,请登录!',
                type: 'success',
                duration: 4000
              })
            } else {
              this.$message.error(data.msg)
            }
          })
          this.visible = false
        } else {
          this.$message({
            message: '未正确填写用户信息',
            type: 'error',
            duration: 1500
          })
          return false
        }
      })
    },
    // 获取验证码
    getCaptcha: function () {
      if (this.dataForm.mobile && this.mobileVallidate) {
        var params = {
          mobile: this.dataForm.mobile
        }
        API.common.createVcode(params).then(({data}) => {
          if (data && data.code === 0) {
            console.log(data)
            this.$message({
              message: '短信发送中...',
              type: 'success',
              duration: 1500
            })
            // 倒计时
            const TIME_COUNT = 60
            if (!this.timer) {
              this.count = TIME_COUNT
              this.show = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--
                } else {
                  this.show = true
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          } else {
            this.$message.error(data.msg)
          }
        })
      } else {
        this.$message({
          message: '请填写正确格式的手机号',
          type: 'error',
          duration: 1500
        })
      }
    }
  }
}
</script>
